<!-- 自定义组件 用于解释v-slot -->
<template>
  <div>
    <header>
      <slot name="header">
      </slot>
    </header>
    <main>
      <!-- 这种带有name属性的插槽叫做剧名插槽 -->
      <slot name="main"></slot>
      <!-- 没有任何属性的插槽叫做默认插槽 -->
      <!-- 使用作用域插槽，需要将简写版的默认插槽注释掉 -->
      <!-- 否则会导致作用域插槽混乱 -->
      <!-- <slot></slot> -->
    </main>
    <footer>
      <slot name="footer"></slot>
    </footer>
    <slot :user="user">
    </slot>
    <slot :row="row">

    </slot>
  </div>
</template>

<script>
export default {
  data () {
    return {
      user: {
        firstName: 'haonan',
        lastName: 'yu'
      }
    }
  },
  props: {
    row: {
      type: Object,
      default: () => {}
    }
  }
}
</script>
